<template>
  <div>
    <el-row>
      <el-col :span="1" :offset="23">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="dialogVisible = true"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="killList"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="图片"
          width="120">
          <template slot-scope="scope">
            <img :src="$imgPrefix + scope.row.image" width="50px" height="50px"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名字"
          width="300">
        </el-table-column>
        <el-table-column
          prop="price"
          label="原价">
        </el-table-column>
        <el-table-column
          prop="killPrice"
          label="活动价">
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="warning" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-dialog
        title="添加活动"
        :visible.sync="dialogVisible"
        width="70%">
        <div>
          <el-row class="row">
            <el-col :span="12">
              <!-- 商品列表下拉菜单 -->
              <el-select v-model="kill.gid" placeholder="请选择" size="mini" style="width: 100%" @change="changeGoods">
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="4">
              <!-- 商品原价、自动填充 -->
              <el-input v-model="kill.price" size="mini" placeholder="原价"></el-input>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="4">
              <!-- 活动价 -->
              <el-input v-model="kill.killPrice" size="mini" placeholder="活动价"></el-input>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="4">
              <!-- 数量 -->
              <el-input v-model="kill.num" size="mini" placeholder="数量"></el-input>
            </el-col>
          </el-row>
          <el-row class="row">
            <!-- 开始、结束时间 -->
            <el-date-picker
              v-model="value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="changeTime">
            </el-date-picker>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
export default{
  data(){
    return{
      killList:[],
      dialogVisible: false,
      value: [new Date(), new Date()],
      goodsList: [],
      kill:{
        gid: null,
        price: null,
        killPrice: null,
        num: null,
        startTime: null,
        endTime: null
      }
    }
  },
  mounted(){
    this.$axios.get("/goods/findByMid/1/1000").then(res => {
      this.goodsList = res.data.data.data
    })
  },
  methods:{
    changeGoods(gid){
      for (const goods of this.goodsList) {
        if(goods.id == gid){
          this.kill.price = goods.price
          return
        }        
      }
    },
    commit(){
      console.log(this.kill)
      this.$axios.post("/kill/add",this.kill).then(res => {

      })
    },
    changeTime(){
      this.kill.startTime = this.value[0]
      this.kill.endTime = this.value[1]
    }
  }
}
</script>
<style scoped>
  .row{
    margin-bottom: 10px;
  }
</style>